<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 开启理想视口的代码 
        width: width的值是多少,则布局视口就被改成了多少
        取值: 数字(有兼容性问题,不常用), device-width(就表示当前设备独立像素的宽度)

        initial-scale= 1.0
        通过这个公式,返回来计算布局视口的宽度
        scale = 屏幕宽度(设备独立像素)  /  布局视口宽度。

    -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
    <!-- <meta name="viewport" content="width=device-width" /> -->
    <!-- <meta name="viewport" content="initial-scale=1.0" /> -->
    <title>Document</title>
  </head>
  <body>
    <h1 id="title"></h1>
    <script>
      document.getElementById('title').innerText =
        document.documentElement.clientWidth
      console.log(document.documentElement.clientWidth)
    </script>
  </body>
</html>
